Tag: learn flutter

  • Flutter Rows & Columns

    Widgets play a key role in flutter layout where everything is a widget. Text and images are widgets but something you don’t see in a Flutter app is also widgets e.g, rows and columns, etc. Text and images are visible widgets whereas rows and columns are layout or invisible widgets.

    Row Widget will have its children stacked in horizontal order.

    Column Widget will have its children stacked in vertical order.

    To make our code easy to read and understand, we’ll create a new widget/file for the home argument of the MaterialApp() widget.

    //File: main.dart
    import 'package:flutter/material.dart';
    import 'package:flutter_rows_columns/home.dart';
    
    void main() => runApp(const HomePage());
    
    class HomePage extends StatelessWidget {
      const HomePage({Key? key}) : super(key: key);
    
      @override
      Widget build(BuildContext context) {
        return const MaterialApp(title: "Flutter Rows & Columns", home: Home());
      }
    }
    //File: home.dart
    import 'package:flutter/material.dart';
    
    class Home extends StatelessWidget {
      const Home({super.key});
    
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            title: const Text("Flutter Rows & Columns"),
          ),
          body: Padding(
            padding: const EdgeInsets.all(8.0),
            child: Align(
              alignment: Alignment.center,
              child: Container(
                color: Colors.black,
                //width: MediaQuery.of(context).size.width,
                //height: MediaQuery.of(context).size.height,
                width: 200,
                height: 400,
                child: Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: [
                      Container(
                        padding: const EdgeInsets.all(8.0),
                        width: 100,
                        height: 100,
                        color: Colors.green,
                      ),
                      Container(
                        padding: const EdgeInsets.all(8.0),
                        width: 100,
                        height: 100,
                        color: Colors.yellow,
                      ),
                      Container(
                        padding: const EdgeInsets.all(8.0),
                        width: 100,
                        height: 100,
                        color: Colors.red,
                      ),
                    ],
                  ),
                ),
              ),
            ),
          ),
        );
      }
    }
    
    Flutter Column Widget

    Let’s change the width and height of the main container widget and use Row Widget instead of Column widget.

    width: 400,
    height: 200,
    Flutter Row Widget
  • Flutter Container Widget

    Do you have a widget that needs

    • some background style, maybe a background color
    • shape
    • or some size constraints?

    Try wrapping it in a Container Widget. It helps you compose, decorate and position child widgets.

    Color

    If you wrap your widget in a container widget without any other parameters, you won’t notice any difference in appearance but if you add the color parameter, your child widget will get a background color.

    Container(
       child: Text('Container Widget'),
       color: Colors.blue
    );

    Without anything else, the container sizes itself to its child.

    Container Widget Color

    Padding

    Use the container’s padding property to add empty space between the child widget and the container boundary.

    Container(
       child: Text('Container Widget'),
       color: Colors.blue,
       padding: EdgeInsets.all(20.0),
    );
    Container Padding

    Margin

    Use the margin property to add empty space that surrounds the widget.

    Container(
       child: Text('Container Widget'),
       color: Colors.blue,
       padding: EdgeInsets.all(20.0),
       margin: EdgeInsets.all(20.0),
    );

    Lets remove the Center widget that wrapped the container widget so that you can get a better idea of the container’s margin property.

    Center Widget Removed
    Container Margin

    Decoration

    Use the decoration property to add a shape to your container like a circle.

    Container(
       child: Text('Container Widget'),
       decoration: BoxDecoration(
          shape: BoxShape.circle,
          color: Colors.blue,
       ),
       padding: EdgeInsets.all(50.0),
       margin: EdgeInsets.all(25.0),
    );

    The decoration is by default sized to the container’s child. In this case, the container fits the circle decoration to the narrowest parameter, the text widget’s height. You can style the decoration with margin and padding, just like before.

    Container Shape

    Alignment, Width & Height

    Use the alignment property to align the child within the container (The text within the text box in this case). Once you set alignment, the container will expand to fill its parent’s width and height. You can override this by setting the container’s width and height properties.

    Container(
       child: Text('Container Widget'),
       color: Colors.blue,
       alignment: Alignment.center,
       width: 200,
       height: 100,
    );
    Container Alignment, Width & Height

    Transform

    The transform applies a slight rotation to the entire contraption to complete the effect. Let us rotate our container to add more flavor to this design.

    Container(
       child: Text('Container Widget'),
       color: Colors.blue,
       width: 200.0,
       height: 200.0,
       transform: Matrix4.rotationZ(0.05),
    );
    Container Transform

    Let us use some more properties to decorate our container widget.

    import 'package:flutter/material.dart';
    
    void main() => runApp(const HomePage());
    
    class HomePage extends StatelessWidget {
      const HomePage({super.key});
    
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          title: "Material App Title",
          home: Scaffold(
            appBar: AppBar(
              title: const Text("Awesome App Title"),
            ),
            body: Center(
              child: Container(
                padding: const EdgeInsets.all(8),
                alignment: Alignment.center,
                width: 150,
                height: 100,
                transform: Matrix4.rotationZ(0.05),
                decoration: BoxDecoration(
                    //shape: BoxShape.circle,
                    borderRadius: BorderRadius.circular(10),
                    boxShadow: const [
                      BoxShadow(
                          color: Colors.blueGrey,
                          blurRadius: 5,
                          offset: Offset(2.0, 5.0)),
                    ],
                    color: Colors.teal,
                    gradient:
                        const LinearGradient(colors: [Colors.yellow, Colors.pink])),
                child: const Text(
                  "Container Widget",
                  textAlign: TextAlign.center,
                  style: TextStyle(
                    color: Colors.white,
                    fontWeight: FontWeight.bold,
                    fontSize: 20,
                  ),
                ),
              ),
            ),
          ),
        );
      } //build
    } //HomePage
    Container Final App
  • Flutter Add Image

    Flutter is an open source framework by Google for building beautiful, natively compiled, multi-platform applications from a single code base. Flutter allows you to build apps for mobile, web, dekstop, and embedded devices – all from a single codebase.

    Referring to the official documentation we can easily add image in a flutter app using the following syntax. 

    Image.asset('image_name')

    Steps – Flutter Add Image

    1. Create a new folder in the root of your flutter proejct. We’ll create assets folder and then will create images folder. In this way, we can later create other folders like fonts in our assets folder.
    Flutter Create Assets/Images Folder
    1.  Copy your desired image in the newly created images folder.
    2. pubspec.yaml is an important file located at the root of the project which is  used to identify the assets used in an app. We have to manipulate this file to use images in a flutter app.
      # To add assets to your application, add an assets section, like this:
       assets:
         - assets/images/flutter.png

    Note: Please take care of indentation.

    • [2 white spaces before assets:]
    • [4 white spaces before – assets/images/flutter.png]

    Also, If you want to use more than one image then don’t write image name after folder name.

    1. Insert flutter add image code in your app.
    Image.asset("assets/images/flutter.png"),

    Code

    import 'package:flutter/material.dart';
    
    void main() => runApp(
          MaterialApp(
            home: Scaffold(
              appBar: AppBar(title: const Text("Flutter Add Image")),
              body: Center(
                child: Image.asset("assets/images/flutter.png"),
              ),
            ),
          ),
        );

    Output

    Output Flutter Add Image

    Add Image from Internet

    To add image from the internet or network we need to use Image.network instead of Image.asset and pass the image URL in the parameter. (Official Documentation)

    Image.network("https://picsum.photos/250?image=9"),

    Happy coding!

  • Flutter Dark Theme

    Continuing the previous blog post which explained flutter Scaffold() and AppBar() widgets. We had used home argument of MaterialApp() widget and the value of this argument was a Scaffold() Widget. Scaffold() Widget had appBar arugment that accepts AppBar() constructor, the consturctor accepts title argument with the value of Text() widget and body argument with a value of Text() widget.

    In this post we’ll learn how to use or enable flutter dark theme in an application. Previously, we learned MaterialApp() Widget using only one parameter i.e, home

    We’ll use a second parameter named theme that accepts ThemeData() constructor. Consider the following code.

    import 'package:flutter/material.dart';
    
    void main() => runApp(
          MaterialApp(
            theme: ThemeData(brightness: Brightness.dark),
            home: Scaffold(
              appBar: AppBar(
                title: const Text("Flutter Dark Theme"),
              ),
              body: const Text("Flutter Dark Theme"),
            ),
          ),
        );
    

    We have used only one argument in ThemeData() i.e, brightness to convert app in to dark theme.

     

    MaterialApp(
            theme: ThemeData(brightness: Brightness.dark),

    Have a look at the complete code now.

    import 'package:flutter/material.dart';
    
    void main() => runApp(
          MaterialApp(
            theme: ThemeData(brightness: Brightness.dark),
            home: Scaffold(
              appBar: AppBar(
                title: const Text("Flutter Dark Theme"),
              ),
              body: const Text("Flutter Dark Theme"),
            ),
          ),
        );
    

    Output

    Flutter Dark Theme

    This was the simplest possible single-line code to use flutter dark theme. We’ll explore more parameters in the later lessons.

  • Flutter Scaffold and AppBar Widgets

    Flutter Scaffold and AppBar Widgets help in the beautification of our App and display some string in the app bar. Consider the following flutter code.

    import 'package:flutter/material.dart';
    
    void main() => runApp(
          const MaterialApp(
            home: Text("Flutter Scaffold & AppBar Widgets"),
          ),
        );

    Here we have used MaterialApp() widget and are using home parameter of the MaterialApp() widget. In the home parameter, we are using a Text widget that displays some text.

    Output

    Basic Material App

    The above output is not clean. We need to use MaterialDesign() in order to make our app fancy. Remember everything in Flutter is a widget?
    MaterialApp() is a widget that wraps various widgets usually required for material design applications.
    Resource: https://api.flutter.dev/flutter/material/MaterialApp-class.html

    Let’s rewrite the above flutter code. Use Scaffold() widget that accepts various parameters.

    1. AppBar: accepts an AppBar() constructor and provide title paramater with a value of Text() widget.with body parameter and use the Text Widget in body parameter.
    2. body: accepts a Text() widget.
    import 'package:flutter/material.dart';
    
    void main() => runApp(
           MaterialApp(
            home: Scaffold(
              appBar: AppBar(
                title: const Text("Flutter Scaffold and AppBar"),
              ),
              body: const Text("Flutter Scaffold & AppBar Widgets"),
            ),
          ),
        );
    

    Output

    Flutter Scaffold and AppBar Widgets

    The output looks so clean now with an elegant AppBar and some text in the body.

  • Minimal Flutter App

    Minimal Flutter app is the simplest possible app that calls the runApp( ) function with a widget.

    import 'package:flutter/material.dart';
    
    void main() {
      runApp(
        const Center(
          child: Text(
            "Minimal Flutter App.",
            textDirection: TextDirection.ltr,
          ),
        ),
      );
    }
    

    In the main function, we are calling runApp( ) function where we are passing two widgets directly irrespective of Stateless or Stateful behavior. We have wrapped the Text( ) widget in Center Widget. In other words, the Center( ) widget has only one child that is a Text( ) widget. This widget takes up the whole screen and we need to provide the text direction as we are not using MaterialApp() widget at the moment.
    Tip: Remember everything in Flutter is a widget.

    Output

    Minimal Flutter App – Output